<!-- 到期设备 -->
<template>
  <div class="app-container">
    <div class="filter-container">
      <el-divider content-position="left">模板位号分组配置</el-divider>
    </div>
    <div class="searchs">
      <div>
        <span>
          位号组名称:
        </span>
        <el-input v-model="queryParams.pointName" placeholder="请输入位号名称" style="width: 200px;" />
      </div>
      <!-- <div>
        <span>
          位号名称:
        </span>
        <el-input v-model="search.name" placeholder="请输入位号名称" style="width: 200px;" />
      </div> -->
    </div>
    <div class="searchs">
      <el-button type="success" plain icon="back" @click="comeBack">返回</el-button>
      <el-button type="primary" @click="handleQuery">搜索</el-button>
    </div>
    <div class="addType">
      <el-button type="primary" icon="plus" @click="addPageQuery">添加</el-button>
      <pagination @pagination="handleQuery" v-if="queryParams.pages.total > 0" v-model:total="queryParams.pages.total"
        v-model:page="queryParams.pages.current" v-model:limit="queryParams.pages.size" />
    </div>
    <el-table v-loading="loading" :data="pageData">
      <el-table-column label="序号" align="center" type="index" width="60" />
      <el-table-column label="组名称" align="center" prop="groupName" />
      <el-table-column label="参数类型" align="center" prop="groupName">
        <template #default="scope">
          {{ scope.row.typeFlag === 'PROPERTY' ? '属性' : '参数' }}
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" fixed="right" width="220">
        <template #default="scope">
          <el-button title="增加位号" type="primary" icon="circlePlus" circle @click.prevent="group(scope.row)" />
          <el-button title="编辑" type="primary" icon="edit" circle @click.prevent="editRow(scope.row)" />
          <el-button title="删除" type="danger" icon="delete" circle @click.prevent="deleteRow(scope.row)" />
        </template>
      </el-table-column>
    </el-table>

    <el-dialog destroy-on-close class="dialogTableVisibleclass" v-model="outerVisible" title="新增位号组">
      <div class="div-container">
        <el-form ref="AddruleFormRef" :rules="rules" :model="addDeviceType" label-width="auto" style="width: 600px"
          class="form-container">
          <el-form-item label="位号组名称" prop="groupName">
            <el-input v-model="addDeviceType.groupName" />
          </el-form-item>
          <el-form-item label="分组编码" prop="groupCode">
            <el-input v-model="addDeviceType.groupCode" />
          </el-form-item>
          <el-form-item label="参数类型" prop="typeFlag">
            <el-select v-model="addDeviceType.typeFlag" placeholder="请选择设备类型" size="large">
              <el-option v-for="(item, idx) in options" :key="idx" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="info" @click="outerVisible = false">关闭</el-button>
          <el-button type="primary" @click="addSave(AddruleFormRef)">增加</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog destroy-on-close class="dialogTableVisibleclass" top="5vh" v-model="outerVisibleEdit" title="编辑位号组">
      <div class="div-container">
        <el-form ref="EditruleFormRef" :rules="rules" :model="editDeviceType" label-width="auto" style="width: 600px"
          class="form-container">
          <el-form-item label="位号名称" prop="groupName">
            <el-input v-model="editDeviceType.groupName" />
          </el-form-item>
          <el-form-item label="分组编码" prop="groupCode">
            <el-input v-model="editDeviceType.groupCode" />
          </el-form-item>
          <el-form-item label="参数类型" prop="typeFlag">
            <el-select v-model="editDeviceType.typeFlag" placeholder="请选择设备类型" size="large" :disabled="true">
              <el-option v-for="(item, idx) in options" :key="idx" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="info" @click="outerVisibleEdit = false">关闭</el-button>
          <el-button type="primary" @click="editSave(EditruleFormRef)">编辑</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "pointGroup",
  inheritAttrs: false,
});
import { useRoute, useRouter } from 'vue-router'
import pointGroupApi, { DeviceTypeReq, LogPageQuery } from "@/api/pointGroup";
import type { FormInstance, FormRules } from 'element-plus'
let deviceTypeId = ref('');
const router = useRouter()
const route = useRoute()
if (route.query.deviceTypeId) {
  deviceTypeId.value = route.query.deviceTypeId as string
}
let addDeviceType = reactive<DeviceTypeReq>({
  groupName: undefined,
  "deviceTypeId": deviceTypeId.value,
  typeFlag: 'PROPERTY',
  groupCode: ''
});
const AddruleFormRef = ref<FormInstance>()
const EditruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules<DeviceTypeReq>>({
  groupCode: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
  ],
  groupName: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
  ],
  deviceTypeId: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
  ],
  typeFlag: [
    { required: true, message: 'Please input Activity name', trigger: 'change' },
  ]
})


let editDeviceType = reactive<DeviceTypeReq>({
  groupName: undefined,
  "deviceTypeId": deviceTypeId.value,
  typeFlag: 'PROPERTY',
  groupCode: ''
});
/**
@date: 2024-08-31 14:55:16
新增电子围栏
*/
let outerVisible = ref(false);
/**
@date: 2024-08-31 14:55:01
编辑电子围栏
*/
let outerVisibleEdit = ref(false);
const loading = ref(false);
let pageData = ref()
let options = ref([
  {
    "value": "PROPERTY",
    "name": "属性"
  },
  {
    "value": "PARAMETER",
    "name": "参数"
  }
])
/** 用户查询参数  */
let queryParams = reactive<LogPageQuery>({
  "pages": {
    "current": 1,
    "size": 10,
    "startTime": undefined,
    "endTime": undefined,
    "orders": [
      {
        "column": undefined,
        "asc": true
      }
    ]
  },
  "pointName": undefined,
  "pointCode": undefined,
  "pointTypeFlag": undefined,
  "rwFlag": undefined,
  "deviceTypeId": deviceTypeId.value,
  "enableFlag": undefined
});
/** 查询 */
function handleQuery() {
  loading.value = true;
  pointGroupApi.getPage(queryParams)
    .then((data) => {
      pageData.value = data.records;
      queryParams.pages.total = data.total;
      queryParams.pages.current = data.current;
      console.log('分页', data);
    })
    .finally(() => {
      loading.value = false;
    });
}
function addPageQuery() {
  outerVisible.value = true
}
/**
@date: 2024-09-04 17:09:35
添加位号
*/
const addSave = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      pointGroupApi.addDevType(addDeviceType)
        .then((data) => {
          handleQuery();
        })
        .finally(() => {
          outerVisible.value = false

        });
    } else {
      console.log('error submit!', fields)
    }
  })
}

function editRow(datas: any) {
  outerVisibleEdit.value = true
  editDeviceType.id = datas.id
  editDeviceType.groupName = datas.groupName
  editDeviceType.deviceTypeId = datas.deviceTypeId
}
/**
@date: 2024-08-31 14:23:01
编辑电子围栏
*/
const editSave = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      pointGroupApi.editSave(editDeviceType)
        .then((data) => {
          handleQuery();
          ElMessage.success('编辑成功');
          outerVisibleEdit.value = false
        })
        .finally(() => {
          outerVisibleEdit.value = false

        });
    } else {
      console.log('error submit!', fields)
    }
  })
}
/**
@date: 2024-08-31 14:22:46
删除电子围栏
*/
function deleteRow(datas: any) {
  pointGroupApi.deleteSave(datas.id)
    .then((data) => {
      console.log('添加', data);
      handleQuery();
      ElMessage.success('删除成功');
    })
    .finally(() => {
    });
}
/**
@date: 2024-09-04 19:42:12
位号
*/
function group(data: any) {
  router.push({ path: '/profile/profileEdit', query: { deviceTypeId: deviceTypeId.value, pointGroupID: data.id } });
}
function comeBack() {
  router.go(-1)
}
onMounted(() => {
  handleQuery();


});
</script>
<style lang="scss" scoped>
.app-container {
  position: relative;
  padding: 10px;

  :deep(.form-container) {
    .el-select__selected-item {
      span {
        color: #333;
      }
    }

    .el-form-item__label {
      color: #333;
    }

    .el-input__inner {
      color: #333;
    }

    .el-textarea__inner {
      color: #333;

    }
  }
}

.div-container {
  :deep(.is-disabled) {
    background-color: rgb(191 191 191);
  }
}

.searchs {
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
}

.addType {
  display: flex;
  justify-content: space-between;
  padding: 0 50px;
}
</style>
